/**@author Jason 吕建辉
 * @data 2018-04-07
 * @描述：模板组件采用 layui-2.2.6 操作手册可参考管饭文档
 */
//提取弹窗组件为公共
let layer;
let userType;
layui.use(['table', 'layer', 'form'], function () {
    let table = layui.table, form = layui.form;
    layer = layui.layer;
    let tableIns = table.render({
        id: 'table',
        elem: '#table',
        url: '/rbac/user/list',
        where: $('#searchFrom').containerJson(),
        method: 'get', //如果无需自定义HTTP类型，可不加该参数
        request: pageRequest,
        response: pageResponse,
        page: pagenation,
        cellMinWidth: 60,//全局定义常规单元格的最小宽度
        cols: [[
            {
                field: 'userName',
                title: '用户姓名',
                align: 'center'
            }, {
                field: 'loginName',
                title: '登录名',
                align: 'center'
            }, {
                field: 'type',
                title: '用户类型',
                align: 'center',
                templet: function (d) {
                    return formatterUserType(d.type);
                }
            }, {
                field: 'createdTime',
                title: '创建时间',
                align: 'center',
                templet: function (data) {
                    return dateFormatter(data.createdTime);
                }
            }, {
                field: 'status',
                title: '用户账号状态',
                align: 'center',
                toolbar: '#toolbar'
            }, {
                field: 'ck',
                title: '操作',
                align: 'center',
                toolbar: '#toolbar2'
            }
        ]]
    });
    //表格最后一列操作按钮监听
    table.on('tool(table)', function (obj) {
        let data = obj.data;
        if (obj.event === 'detail') {
            $('#addOrUpdate').form('load', data);
            readOnly();
            form.render('select');//渲染下拉框，必须加，不然不起作用
            openForm('addOrUpdate');
        } else if (obj.event === 'edit') {
            $('#addOrUpdate').form('load', data);
            revert();
            form.render('select');//渲染下拉框，必须加，不然不起作用
            openForm('addOrUpdate');
        }
    });
    // 绑定操作
    let $2 = layui.$, active = {
        reset: function () {//重置
            clearSearch();
        },
        add: function () {//新增
            $('#addOrUpdate').form('clear');
            revert();
            form.render('select');//渲染下拉框，必须加，不然不起作用
            openForm('addOrUpdate');
        }
    };
    $2('.layui-btn').on('click', function () {
        let type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    //监听 新增/编辑 表单提交
    form.on('submit(addOrUpdate)', function (data) {
        commitFrom(tableIns);
    });
    //监听 查询表单提交
    form.on('submit(search)', function (data) {
        tableIns.reload({
            page: {curr: 1},
            where: data.field
        });
        return false;//防止页面刷新
    });
    //监听锁定操作
    form.on('checkbox(userStatus)', function (obj) {
        operation(this.value, obj.elem.checked, tableIns);
    });
});

function readOnly() {
    $('#addOrUpdate input').prop("readonly", true);
    $('#addOrUpdate select').prop("disabled", 'disabled');
    $('#addOrUpdate button').parent().parent().hide();
}

function revert() {
    $('#addOrUpdate input').prop("readonly", false);
    $('#addOrUpdate select').prop("disabled", '');
    $('#addOrUpdate button').parent().parent().show();
}

//清空查询条件
function clearSearch() {
    $('.layui-input').val("");
}

//打开表单
function openForm(id) {
    layer.open({
        type: 1,
        title: '新增菜单',
        shadeClose: true,
        skin: 'layui-layer-rim',
        anim: 2,
        shade: 0.3,
        maxmin: true,
        area: ['50%', '93%'],
        content: $('#' + id), //用id时 ，type 必须 =1
    });
}

//新增 or 更新 提交表单
function commitFrom(tableIns) {
    let data = $('#addOrUpdate').serializeJson();
    let url = '/rbac/user/add';
    if (data.id) {
        url = '/rbac/user/update'
    }
    $.ajax({
        url: url,
        data: data,
        method: 'post',
        success: function (res) {
            if (res.flag) {
                layer.msg('处理成功', {time: 2000}, function () {
                    reloadTable(tableIns);
                });
            } else {
                layer.msg(res.msg, {time: 2000});
            }
        }
    })
}

//用户账号开关
function operation(id, checked, tableIns) {
    let isOn = checked ? 0 : 1;
    let msg = checked ? '用户锁定后，账号无法登陆，确定吗？' : '确认解锁此用户吗？';
    let oData = {};
    oData.id = id;
    oData.status = isOn;
    layer.confirm(msg, {icon: 3, title: '提示', btn: ['锁定', '取消']}, function (index) {
        $.ajax({
            url: '/rbac/user/updateStatus',
            method: 'post',
            data: oData,
            success: function (res) {
                if (res.flag) {
                    layer.msg("成功", {icon: 6, time: 3000});
                } else {
                    layer.msg(res.msg, {icon: 5, time: 3000});
                }
                reloadTable(tableIns);
            },
            error: function () {
                reloadTable(tableIns);
            }
        });
    }, function (index) {
        reloadTable(tableIns);
    });
}

function reloadTable(tableIns) {
    tableIns.reload({
        page: {curr: 1},
        where: {}
    });
}

$(document).ready(function () {
    initData();
});

function initData() {
    $.ajax({
        url: '/rbac/dict/all',
        method: 'get',
        data: {
            type: 1
        },
        async: false,
        success: function (res) {
            if (res.flag) {
                userType = res.data;
                $('#s_userType,#userType').html('').append('<option>请选择</option>');
                $.each(res.data, function (index, val) {
                    let option = $('<option value="' + val.code + '">' + val.value + '</option>');
                    $('#s_userType,#userType').append(option);
                });
            }
        }
    });
}

function formatterUserType(value) {
    let str = '';
    if (value != null) {
        $.each(userType, function (index, val) {
            if (val.code == value) {
                str = val.value;
            }
        });
    }
    return str;
}


